<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件操作</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript">
			
		</script>
		<style type="text/css">
			div>input{
				width: 200px;
				height: 100px;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<div><span>点击按钮输出button绑定的事件，点击删除会干掉button绑定的其中一个事件</span></div>
		<div id="div1">
			<input type="button" id="btn" value="按钮"/>
			<input type="button" id="btn2" value="删除" />
		</div>
		
		<script type="text/javascript">
			// 1.onclick, 已经淘汰的使用方式, jQuery种没有对应的实现
			
			// 如何把绑定在onclick中的函数删除掉？
			// 		直接令onclick置为空,undefined
			
			// var btn = document.getElementById('btn');
			// btn.onclick = function(e){
			// 	console.log(111);
			// }
			// // 如果还有btn的代码,会覆盖以前的
			// btn.onclick = function(e){
			// 	console.log(222);
			// }
			
			
			//2. addEventListener : 绑定事件, 不互相覆盖
			
			// 如何把绑定在addEventListener事件中的函数删除掉？
			// (不能把一个匿名函数删除)-->removeEventListener():中的fn必须是声明的
			
			// var btn = document.getElementById('btn');
			// btn.addEventListener('click', function(e){
			// 	console.log(111);
			// });
			// function f2(e){
			// 	console.log(222);
			// };
			// 
			// btn.addEventListener('click', f2);
			// 
			// var btn2 = document.getElementById('btn2');
			// btn2.addEventListener('click', function(e){
			// 	btn.removeEventListener('click',f2);
			// })
			
			
			// 以上方法对应jQuery中的bind
			// 	bind('事件名',fn)
			
			// $('#btn').bind('click', function(e){
			// 	console.log('abc');
			// }).bind('click', function(e){
			// 	console.log('whf15')
			// });
			//可以写两个一样的输出不同的，但推荐使用链式表达式		
				
			// removeEventListener()对应jQuery中的什么操作？
			// $('#btn').bind('click', function(e){
			// 	console.log('abc');
			// }).bind('click', f2);
			
			// 2.1 unbind('事件名',fn)-->解绑定事件fn
			// function f2(e){
			// 	console.log('whf15');
			// }
			// $('#btn2').bind('click', function(e){
			// 	$('#btn').unbind('click', f2);
			// })
			
			// 2.2 unbind('事件名') --> 解绑定所有的事件名中声明的事件,
			
			// $('#btn').bind('mouseover', function(e){
			// 	// alert('whf');
			// 	console.log("whftest");
			// });
			
			// 此时#btn绑定有三个事件,在调用unbind后还剩下多少个事件呢？
			// $("#btn2").bind('click',function(e){
			// 	$('#btn').unbind('click');
			// });
			
			// 在某个时间点能否用一个element去查询它绑定了哪些事件？
			// console.log(getEventListeners(document.getElementById('btn')));
			// getEventListeners在console中支持,js中不可见
			// 所以问题是jQuery的unbind是如何做到的呢？
			// jQuery知道用addEventListener()添加的事件(匿名)unbind是删除不掉的,
			
			
			// 2.3 unbind(): --> 解绑定所有事件
			// $("#btn2").bind('click',function(e){
			// 	$('#btn').unbind();
			// });
			
			//2.4 unbind('事件名 事件名): --> 可以用空格分隔指定多个事件
			// $("#btn2").bind('click',function(e){
			// 	$('#btn').unbind('click mouseover');
			// });
			
			
			// (原生js推荐) --> 对应jQuery中的bind
				// addEventListener()
				// removeEventListener()
				
				
			// 3. 事件触发一次后,删除  (原生js)
			// var btn = document.getElementById('btn');
			
			// function f1(e){
			// 	console.log("whf1");
			// 	btn.removeEventListener('click', f1);
			// }
			// 
			// btn.addEventListener('click', f1);
				
			// 不想把函数定义出来？arguments.callee()
			
			// btn.addEventListener('click', function(e){
			// 	console.log("whf1");
			// 	btn.removeEventListener('click', arguments.callee);
			// });	
			
			
			// jQuery实现 --> one('事件名', fn);
			// $('#btn').one('click', function(e){
			// 	console.log('whf1');
			// });
			// 
			
			
			// 4.冒泡
			// var div1 = document.getElementById('div1');
			// 
			// div1.addEventListener('click',function(e){
			// 	// console.log(e.target);
			// 	if(e.target.getAttribute('id') == 'btn'){
			// 		console.log('whftest!');
			// 	}
			// 	var $whf = $(e.target);
			// 	// console.log(e.target.getAttribute('id'));
			// 	if($whf.is('#btn')){
			// 		console.log("this an apple!")
			// 	}
			// });
			
			// 冒泡在jQuery中如何体现, live/die -- 1.7以前版本有，现已经废弃
			//	--delegate
			//	--undelegated ( 五种使用方法 ）)
			
			//	delegate的使用方式
			// 		父元素的jQuery对象.delegate('子元素的选择器'，'事件名'， fn)
			// 好处:
			// 1.在delegate的参数fn内,不用再去找e.target,可以直接使用this, 因为jQuery在调用fn以前,this已经指向了e.target
			// 2.通过子元素的选择器的方式,即可筛选目标子元素,不需要自己用if+is来判断
			
			// $('#div1').delegate('#btn', 'click', function(e){
			// 	console.log('this is test!');
			// 	console.log(this, e.target);
			// });
			
			// undelegate的使用方式
			// 4.1.undelegate('选择器','事件名', fn);
			// 
			// function f1(e){
			// 	console.log('this is my answer');
			// }
			// 
			// var $div1 = $('#div1');
			// 
			// $div1.delegate('#btn', 'click', f1);
			// 
			// $('#btn2').bind('click', function(e){
			// 	$div1.undelegate('#btn', 'click', f1);
			// });
			
			
			// 4.2 undelegate('选择器','事件名');
			// function f2(e){
			// 	console.log('this is my question!');
			// }
			// // $div1.delegate('#btn', 'click.namespace2', f2);
			// $('#btn2').bind('click', function(e){
			// 	$div1.undelegate('#btn', 'click');
			// });
			
			// 4.3 undelegate('事件名');
			
			// $('#btn2').bind('click', function(e){
			// 	$div1.undelegate('click');
			// });
			
			
			// 4.4 undelegate('名字空间') --> 跟在事件名后的。如:click.namespace1
			// $('#btn2').bind('click', function(e){
			// 	$div1.undelegate('.namespace2');
			// });
			
			
			// 4.5 undelegate 在指定时间类型时,可以有多个,空格分隔
			// function f3(e){
			// 	console.log('this is my showtime!');
			// }
			// 
			// $div1.delegate('#btn',"dblclick",f3);
			// 
			// $('#btn2').bind('click', function(e){
			// 	$div1.undelegate('#btn', 'click dblclick');
			// });
			
			// 知识点: bind Vs delegate ,
			// 1. bind 直接绑定目标元素, delegate 绑定目标元素的父元素
			// 2. 如果目标元素很多, 那么bind会给每个目标元素绑定事件, 会浪费内存,减慢运行速度, 而delegate只会在父元素上绑定一个事件.
			
			// 3. 新增元素, 是否可以自动的获得事件
					// bind: 不可以! 新增元素必须再次绑定一次事件,无法自动获得. ,
					// delegate: 可以, 只要是在父元素下, 无论调用delegate的时候新增元素是否已经添加, 都能获得事件处理函数
		
			// 5. on 绑定事件
			// bind --> on('事件名', fn)
			// delegate --> on('事件名', '选择器', fn)
			
			function f1(e){
				console.log('whf-on1');
			}
			
			function f2(e){
				console.log('whf-on2');
			}
			
			// var $btn = $('#btn');
			// 
			// $btn.on('click',f1).on('click', f2);
			// 
			// $('#btn2').on('click',function(e){
			// 	$btn.off('click');
			// });
			
			// var $div1 = $('#div1');
			// $div1.on('click', '#btn', f1).on('click', '#btn', f2);
			// 
			// $('#btn2').on('click', function(e){
			// 	$div1.off('click', 'btn');
			// });
			
			// 6. .事件名(fn), 绑定事件,可以用unbind取消
			var $btn = $('#btn');
			
			$btn.click(f1);
			
			$('#btn2').click(function(e){
				$btn.unbind('click');
			});
		</script>
	</body>
</html>
